<template>
        <view class="tabbar">

            <view class="bar d-flex">
                <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('faxian')" :class="{active:activeBar.activeBar==='faxian'}">
                    <image class="icon" :src="getImgSrc('faxian')"></image>
                    <text class="text">发现</text>
                </view>
                <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('quanzi')" :class="{active:activeBar.activeBar==='quanzi'}">
                    <image class="icon" :src="getImgSrc('quanzi')"></image>
                    <text class="text">群</text>
                </view>
                <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('jilu')" :class="{active:activeBar.activeBar==='jilu'}">
                    <image class="icon" :src="getImgSrc('jilu')"></image>
                    <text class="text">记录</text>
                </view>
                <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('jihua')" :class="{active:activeBar.activeBar==='jihua'}">
                    <image class="icon" :src="getImgSrc('jihua')"></image>
                    <text class="text">计划</text>
                </view>
                <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('wode')" :class="{active:activeBar.activeBar==='wode'}">
                    <image class="icon" :src="getImgSrc('wode')"></image>
                    <text class="text">我的</text>
                </view>
            </view>
        </view>
  
</template>

<script setup lang="ts">
import { onReady, onShow } from '@dcloudio/uni-app'
import { onMounted } from 'vue'
import { activeBar as  activeBarStore}  from '@/store/activeBar'
import { systemInfo as systemInfoStore } from "@/store/systemInfo";

const systemInfo: any = systemInfoStore();

const activeBar:any = activeBarStore();

const getImgSrc = (text:string)=>{
    if(text==='faxian'){
        if(activeBar.activeBar==='faxian'){
            return '/static/tabbar/discover-hover.png'
        }else{
            return '/static/tabbar/discover.png'
        }
        
    }
    if(text==='quanzi'){
        if(activeBar.activeBar==='quanzi'){
            return '/static/tabbar/quanzi-hover.png'
        }else{
            return '/static/tabbar/quanzi.png'
        }
        
    }
    if(text==='jilu'){
        if(activeBar.activeBar==='jilu'){
            return '/static/tabbar/jilu-hover.png'
        }else{
            return '/static/tabbar/jilu.png'
        }
        
    }
    if(text==='jihua'){
        if(activeBar.activeBar==='jihua'){
            return '/static/tabbar/jihua-hover.png'
        }else{
            return '/static/tabbar/jihua.png'
        }
        
    }
    if(text==='wode'){
        if(activeBar.activeBar==='wode'){
            return '/static/tabbar/wode-hover.png'
        }else{
            return '/static/tabbar/wode.png'
        }
        
    }

}


const setActiveBar=(text:string)=>{
    activeBar.setActiveBar(text);

    if(text==='faxian'){
        //switchTab
        /* #ifdef H5 */
        uni.navigateTo({
            url: '/pages/discover/discover',
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: '/pages/discover/discover',
        });
        /*#endif*/

        return;
    }
    if(text==='quanzi'){

        /* #ifdef H5 */
        uni.navigateTo({
            url: '/pages/quanzi/quanzi',
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: '/pages/quanzi/quanzi',
        });
        /*#endif*/


        return;
    }

    if(text==='jilu'){

        /* #ifdef H5 */
        uni.navigateTo({
            url: '/pages/TUIKit/TUIPages/TUIConversation/index',
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: '/pages/TUIKit/TUIPages/TUIConversation/index',
        });
        /*#endif*/
        return;
    }
    
}









onMounted(()=>{
})

onShow(()=>{
	//checkNet();
})

</script>

<style lang="scss" scoped>

.tabbar{
    position:fixed;
    z-index: 300;
    left:0;
    bottom:10rpx;
    right:0;
    width:750rpx;
    border-top:1px solid #ddd;
    box-shadow: 0 0 5px #ddd;
    background-color:#fff;
    padding-bottom: calc(constant(safe-area-inset-bottom) - 10rpx); 
    padding-bottom: calc(env(safe-area-inset-bottom) - 10rpx);
    .bar{
        width:100%;
        height:120rpx;
        flex-direction:row;

        .tab{
            width:150rpx;
            height:120rpx;
            // justify-content: center;
            // align-items: center;
            .text{
                font-size:23rpx;
                margin-top:5rpx;
                color:#606060;
            }
            .icon{
                width:50rpx;
                height:50rpx;
            }

            &.active{
                .text{
                    color:$slim-main;
                }
            }
        }
        
    }
}

</style>
